<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script src="jquery-1.1.3.pack.js"></script>
		<script type="text/javascript">
			var project='${projectName}';
			var sheet='${sheetName}';
			$(document).ready(function(){
				 $("#adddata").click(function(){
				 	$(this).hide();
				 	
				 	$.get("addNewRow.action?projectName="+project+"&sheetName="+sheet, function(data){
			  			$("#fornewrow").html(data);
					});
				 });
			});


			function del(s,d){
			  	$.get("deleteData.action?projectName="+project+"&sheetName="+sheet+"&rowNo="+s, function(data){
			  			alert(data);
			  			$("#"+d).hide();
			});
			}
			
			function edit(d){
				var tr = document.getElementById(d);
				var tds = tr.childNodes;
				for(var i = 0; i < tds.length; i++){
					if(tds[i].nodeType == 1){
						var cell = tds[i].childNodes;
						for(var j = 0; j < cell.length; j++){
							if(cell[j].nodeType == 1 && cell[j].nodeName == "INPUT"){
								var input = cell[j];
								input.readOnly = false;
								input.style.border = "1px solid #003399";
								input.focus();
							}
						}
					}
				}
				document.getElementById("saveBt" + d).style.display = "inline";
				document.getElementById("editBt" + d).style.display = "none";
			}
			
			function closeDiv(ele){
				document.getElementById("colName").value="";
				document.getElementById("defaultValue").value="";
				document.getElementById("addColumnDiv").style.display = "none";
			}
			
			function addColumn(){
				document.getElementById("addColumnDiv").style.display = "block";
			}
			
</script>
	<style type="text/css">
		#mainTitle{
   			background-color: #6699FF;
   			font-size: 32px;
   		}
	</style>
	</head>

	<body id="body">
		<div id="mainTitle">&nbsp; 
   			当前项目名称： ${projectName } 
   		</div>
   		<div style="padding: 10px;">
   			当前查看的表为： ${sheetName } <a href="delTable.action?projectName=${projectName }&sheetName=${sheetName }" style="font-size: 12px;">删除此表</a>
   		</div>
		<table border="0" style="border: 1px solid #ccc;"
			cellpadding="0" cellspacing="0">
			<tr>
				<!-- 
				<th style="border: 1px solid #ccc;">
					序号
				</th>
				 -->
				<s:iterator value="header" status="status" id="val">
					<th style="border: 1px solid #ccc;">
						<s:property value="val" />
						<span style="float: right; font-size: 12px;"> <a href="delColumn.action?projectName=${projectName }&sheetName=${sheetName }&colName=${val }">del</a> <s:set
								name="fieldNum" value="header.length"></s:set> <s:if
								test="#fieldNum == (#status.index + 1)">
								<a href="#addNew" onclick="addColumn()">add</a>
							</s:if> </span>
					</th>
				</s:iterator>
				<th style="border: 1px solid #ccc;">
					操作
				</th>
			</tr>
			<s:iterator value="lists" status="status" id="value">
				<s:set name="pindex" value="#status.index"></s:set>
				<form action="editRow.action" method="post">
					<input type="hidden" name="projectName" value="${projectName }">
					<input type="hidden" name="sheetName" value="${sheetName }">
				<tr id="<s:property value="#status.index"/>">
					<s:iterator value="rowData" status="status" id="data">
						<s:if test="#status.index==0">
							<s:set name="id" value="#data"></s:set>
						</s:if>
						<s:else>
							<td style="border: 1px solid #ccc;"><!-- 		<s:property value="data" /> -->

							<input type="text" value="${data }" name="field" style="border: none; background-color: transparent; height: 20px;" readonly="readonly" size="10">

							</td>
						</s:else>
					</s:iterator>
					
					<td style="border: 1px solid #ccc;" align="right">
						
						<button id="editBt${pindex }" onclick="edit(${pindex }); return false;" style="border: 1px solid #ccc; width: 50px; height: 20px; background-color: cadetblue; margin: 5px;">
							编辑
						</button>
						<input type="hidden" name="lineNum" value="${id }">
						<button id="saveBt${pindex }" style="border: 1px solid #ccc; width: 50px; height: 20px; background-color: cadetblue; margin: 5px; display: none;">
							保存
						</button>
						<button name="btn" onclick="del(${id},${pindex});"
							style="border: 1px solid #ccc; width: 50px; height: 20px; background-color: cadetblue; margin: 5px;">
							删除
						</button>
					</td>
				</tr>
				</form>
			</s:iterator>
		</table>
		<button id="adddata">
			添加一行数据
		</button>
		<div id="fornewrow"></div>
		<div id="addColumnDiv" style=" width: 400px; margin-top: 20px; display: none;">
			<div>
				<a name="addNew">添加新字段</a>
				<span style="float: right;"><a href="#" onclick="closeDiv(); return false" style="font-size: 12px;"> 关闭</a> </span>
			</div>
			<div>
				<form action="addColumn.action" method="post">
					<input type="hidden" name="projectName" value="${projectName }">
					<input type="hidden" name="sheetName" value="${sheetName }">
					字段名： <input type="text" name="colName" id="colName">	<br>
					默认值： <input type="text" name="defaultValue" id="defaultValue">	(可选) <br>
					<input type="submit" value="添加"> <input type="reset" id="addReset" value="重置">
				</form>
			</div>
		</div>
	</body>
</html>
